<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-22 11:06:08
 * @LastEditTime: 2020-03-06 10:06:11
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>Hello APP</title>
		<link rel="stylesheet" type="text/css" href="../css/vant.css">
		<link rel="stylesheet" type="text/css" href="../css/base.css" />
		<link rel="stylesheet" type="text/css" href="../css/local.css" />
		<script type="text/javascript" src="../script/jquery.js"></script>
		<script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
		<script type="text/javascript" src="../script/vue.min.js"></script>
		<script src="../script/vant.min.js"></script>
		<script type="text/javascript" src="../script/fastclick.js"></script>
		<script type="text/javascript" src="../script/base.js"></script>
		<style type="text/css">
			.cz {
				padding: 15px;
			}

			.m {
				padding: 15px 0;
				text-align: center;
				font-size: 16px;
				color: #cd1b21;
				margin-bottom: 10px;
				background: #fff;
				border-radius: 6px;
				border: 1px solid #fff;
			}

			.m:hover {
				border: 1px solid #cd1b21;
				background: rgba(255, 171, 174, 0.1);
			}

			.m span {
				font-weight: 700;
				font-size: 18px;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="init-full">
				<van-nav-bar class="head" title="余额充值" left-arrow @click-left="onClickLeft">
				</van-nav-bar>
				<div class="body-no-bottom">
					<div class="content">
						<div class="cz">
							<van-row gutter="20">
								<van-col span="8">
									<div class="m" :class="payIndex == 1?'on':''" @click="payBySelect(1)">
										<span>100</span>元</div>
								</van-col>
								<van-col span="8">
									<div class="m" :class="payIndex == 2?'on':''" @click="payBySelect(2)">
										<span>500</span>元</div>
								</van-col>
								<van-col span="8">
									<div class="m" :class="payIndex == 3?'on':''" @click="payBySelect(3)">
										<span>1000</span>元</div>
								</van-col>
								<van-col span="8">
									<div class="m" :class="payIndex == 4?'on':''" @click="payBySelect(4)">
										<span>2000</span>元</div>
								</van-col>
								<van-col span="8">
									<div class="m" :class="payIndex == 5?'on':''" @click="payBySelect(5)">
										<span>5000</span>元</div>
								</van-col>
								<van-col span="8">
									<div class="m" :class="payIndex == 6?'on':''" @click="payBySelect(6)">
										<span>10000</span>元</div>
								</van-col>
							</van-row>
						</div>


						<van-cell-group style="margin-top:10px;">
							<van-field label="其他金额" type="number" v-model="money" placeholder="请输入充值金额">
							</van-field>

						</van-cell-group>
						<div class="btn-padding">
							<van-button :disabled="ifConfirm" :loading="ifConfirm" loading-text="余额充值中..."
								type="primary" block @click="payByWrite">充值</van-button>
						</div>
					</div>
					<van-loading v-if="showLoading" />
				</div>
			</div>
			<van-action-sheet v-model="showPageType" :actions="pageTypes" description="支付方式选择"
				@cancel="showPageType = false;" @select="payMoney"></van-action-sheet>
		</div>
	</body>

	<!-- 调用 uniapp webview 的 api ，记得需要写在 body 标签下面 -->
	<script src="../../../assets/script/uni.webview.1.5.4.js"></script>
	<script type="text/javascript">
		var vm;
		//$('.init-full').show();

		var OrderNo = '';

		// var aliPayPlus = api.require('aliPayPlus');
		// var wxPay = api.require('wxPay');

		vm = new Vue({
			el: '#app',
			data: {
				showLoading: false,
				showPageType: false,
				ifConfirm: false,
				serverIP: 'http://' + FLD.serverIP,
				pageTypes: [{
					name: '支付宝'
				}, {
					name: '微信'
				}],
				shoppingMallServerIP: 'http://' + FLD.shoppingMallServerIP,
				money: '',
				payIndex: 0,
				realMoney: 0
			},
			created: function() {
				var that = this;
			},
			methods: {
				payBySelect(index) {
					var that = this;
					that.payIndex = index;

					if (that.payIndex == 1) {
						that.realMoney = 100;
					} else if (that.payIndex == 2) {
						that.realMoney = 500;
					} else if (that.payIndex == 3) {
						that.realMoney = 1000;
					} else if (that.payIndex == 4) {
						that.realMoney = 2000;
					} else if (that.payIndex == 5) {
						that.realMoney = 5000;
					} else if (that.payIndex == 6) {
						that.realMoney = 10000;
					}

					that.showPageType = true;

				},
				payByWrite() {
					var that = this;
					that.realMoney = that.money;
					that.showPageType = true;
				},
				payMoney(item, index) {
					var that = this;
					that.showPageType = false;
					that.ifConfirm = true;
					var obj_ = {
						balanceAmount: that.realMoney,
						payType: index + 1
					}
					FLD.ajax('sp_createBalanceOrder', obj_, function(res) {

						OrderNo = res.ds[0].orderNo;
						if (index == 0) {

							var obj = {
								orderNo: OrderNo
							}
							FLD.nativeRequest_moneyPay('pay', obj, function(res) {
								aliPayPlus.payOrder({
									orderInfo: res
								}, function(ret, err) {
									// that.ifConfirm = false;
									api.sendEvent({
										name: 'refreshBalance'
									});
									OrderNo = '';
									setTimeout(function() {
										api.closeWin();
									}, 2000)

								});
							})
						} else {
							var obj = {
								orderNo: OrderNo
							}
							FLD.nativeRequest_moneyPay('pay', obj, function(res) {

								var data = JSON.parse(res);
								var myDate = new Date();
								var now = Date.parse(new Date()) / 1000;

								var stringA = 'appid=' + data.appid + '&noncestr=' + data.nonce_str +
									'&package=Sign=WXPay' + '&partnerid=' + data.mch_id +
									'&prepayid=' + data.prepay_id + '&timestamp=' + now +
									'&key=fldabcdefg123456789erfgiht56jh9f';
								var signature = api.require('signature');
								signature.md5({
									data: stringA
								}, function(ret, err) {
									if (ret.status) {
										var sign = ret.value.toUpperCase();
										wxPay.payOrder({
											apiKey: data.appid,
											orderId: data.prepay_id,
											mchId: data.mch_id,
											nonceStr: data.nonce_str,
											timeStamp: now,
											package: 'Sign=WXPay',
											sign: sign
										}, function(ret, err) {
											// that.ifConfirm = false;
											api.sendEvent({
												name: 'refreshBalance'
											});
											OrderNo = '';
											setTimeout(function() {
												api.closeWin();
											}, 2000)

										});

									}
								});


							})
						}


					});


				},
				onClickLeft() {
					window.history.back();
				}
			}
		})
	</script>

</html>